<!-- datam.vue -->
<template>
  <view>
    <!-- 表格 -->
    <view class="table">
      <view class="table-header">
        <view>日期</view>
        <view>设备</view>
        <view>密度</view>
        <view>检测员</view>
      </view>
      <view class="table-body" v-for="(row, index) in dataList" :key="index">
        <view>{{ row.date }}</view>
        <view @click="editData(index, 'morning')">{{ row.morning }}</view>
        <view @click="editData(index, 'noon')">{{ row.noon }}</view>
        <view @click="editData(index, 'evening')">{{ row.evening }}</view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="button-group">
      <button @click="verifyPassword">清除数据</button>
      <button @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 存储多天的数据
      correctPassword: '123123' // 设置正确的密码
    };
  },
  onLoad() {
    this.loadData();
    if (this.dataList.length === 0) {
      this.initDateData();
    }
  },
  methods: {
    // 从本地存储获取数据
    loadData() {
      try {
        const receivedData = uni.getStorageSync('dailyData');
        if (receivedData) {
          if (typeof receivedData === 'string') {
            this.dataList = JSON.parse(receivedData);
          } else if (Array.isArray(receivedData)) {
            this.dataList = receivedData;
          } else {
            console.error('本地存储的数据格式不正确');
            this.dataList = [];
          }
        }
      } catch (error) {
        console.error('解析数据时出错:', error);
        this.dataList = [];
      }
    },
    // 初始化日期数据
    initDateData() {
      const today = new Date();
      for (let i = 0; i < 1; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);
        const formattedDate = this.formatDate(date);
        this.dataList.push({
          date: formattedDate,
          morning: '空',
          noon: '空',
          evening: '小段'
        });
      }
    },
    // 格式化日期函数
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    editData(index, type) {
      uni.showModal({
        title: '编辑数据',
        content: '请输入新值',
        editable: true,
        success: (res) => {
          if (res.confirm) {
            const newValue = res.content;
            if (['morning', 'noon', 'evening'].includes(type)) {
              this.$set(this.dataList[index], type, newValue);
              this.saveData();
            }
          }
        }
      });
    },
    // 保存数据到本地存储
    saveData() {
      try {
        uni.setStorageSync('dailyData', JSON.stringify(this.dataList));
      } catch (error) {
        console.error('保存数据时出错:', error);
      }
    },
    verifyPassword() {
      uni.showModal({
        title: '密码验证',
        content: '请输入密码',
        editable: true,
        success: (res) => {
          if (res.confirm) {
            const inputPassword = res.content;
            if (inputPassword === this.correctPassword) {
              this.clearData();
            } else {
              this.showToast('密码错误');
            }
          }
        }
      });
    },
    clearData() {
      try {
        uni.removeStorageSync('dailyData');
        this.dataList = [];
        this.showToast('数据已清除', 'success');
      } catch (error) {
        console.error('清除数据时出错:', error);
        this.showToast('清除数据失败');
      }
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      });
    },

    // 显示提示信息
    showToast(title, icon = 'none', duration = 2000) {
      uni.showToast({
        title,
        icon,
        duration
      });
    },

  }
};
</script>

<style scoped>
.table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}

.table-header {
  display: flex;
  background-color: #f0f0f0;
}

.table-header view {
  flex: 1;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.table-body {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.table-body view {
  flex: 1;
  padding: 10px;
  border-right: 1px solid #ccc;
}

.button-group {
  margin-top: 20px;
}

.button-group button {
  margin-right: 10px;
}
</style>